<template>
  <div class="register">
    <div class="top">
      <span class="cha" @click="goback">&lt;</span>
    </div>
    <div class="dl">
      <p>注册</p>
      <form>
        <input type="email" placeholder="输入邮箱" v-jiaoyan="'required|email'" v-model="emailval">
        <span class="jiaoyan"></span>
      </form>
      <form>
        <input type="password" placeholder="输入密码" v-jiaoyan="'required|minlength(6)|maxlength(12)'" autocomplete="off"
          v-model="passwordval">
        <span class="jiaoyan"></span>
      </form>
      <form>
        <div class="aaa">
          <input type="password" placeholder="输入邮箱验证码" v-jiaoyan="'required|minlength(6)|maxlength(12)'"
            autocomplete="off" v-model="yzmval">
          <span class="jiaoyan"></span>
          <div @click="yzm" :class="flag ? 'huoYzm1' : 'huoYzm'">获取验证码</div>
        </div>
      </form>
      <button class="dlbtn" @click="zc">注册</button>
    </div>
  </div>
  <Async_message_part :flag="passwordFlag" :title="passwordTitle" />
</template>

<script setup>
import { ref, defineAsyncComponent, watch } from 'vue';
import { getRegisterAPI, postRegisterAPI } from '../api/Register-page';
const Async_message_part = defineAsyncComponent(() => import('../components/common/message-part.vue'))

const emailval = ref('')
const passwordval = ref('')
const yzmval = ref('')
const passwordFlag = ref(false)
// 控制验证码按钮的颜色，是否禁用
const flag = ref(false)
const passwordTitle = ref('')
// 定时器时间
const time = ref(60)
// 定时器
const yzmset = ref(null)
// 邮箱正则
const email = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

// 返回login页面
function goback() {
  document.querySelector('.register').style.transform = 'translateX(100%)';
}

// message简便方法
function Timeout(title) {
  passwordFlag.value = true
  passwordTitle.value = title
  setTimeout(() => {
    passwordFlag.value = false
    passwordTitle.value = ''
  }, 1000)
}

//定时器方法
function dsq() {
  // 定时器方法
  yzmset.value = setInterval(() => {
    let yzm = document.querySelector('.huoYzm1')
    if (time.value === 0) {
      clearInterval(yzmset.value)
      yzm.innerHTML = '获取验证码'
      time.value = 60
    } else {
      time.value--;
      yzm.innerHTML = time.value + 's'
    }
    console.log(time.value);
  }, 1000)
}

// 验证码
function yzm() {
  console.log(12345);
  if (email.test(emailval.value)) {
    getRegisterAPI(`common/user/getCode/${emailval.value}`).then(res => {
      console.log(res);
      let code = res.data.code
      if (code === 200) {
        dsq()
      }else if(code==='EAUTH'||code==='EMESSAGE'){
        Timeout('验证码发送失败！')
      }
    })
  } else {
    Timeout('请输入正确的邮箱！')
  }
}

// 注册
async function zc() {
  if (email.test(emailval.value) === false) {
    Timeout('请输入正确的邮箱！')
  } else if (passwordval.value.length !== 6) {
    Timeout('密码必须为6位！')
  } else if (yzmval.value.length !== 6) {
    Timeout('验证码必须为6位！')
  } else {
    postRegisterAPI('common/user/register', {
      'code': yzmval.value,
      'email': emailval.value,
      'password': passwordval.value
    }).then((res) => {
      console.log(res);
      let code = res.data.code
      if (code === 200) {
        dsq()
        Timeout("注册成功！")
        goback()
      }else if (code==='user:email_existed'){
        Timeout('邮箱已经注册啦~')
      }
    })
  }
}

// 监听到验证密码和邮箱变化时，判断验证是否成功
watch([emailval], (newval) => {
  // 如果邮箱验证成功
  if (email.test(newval)) {
    flag.value = true
  } else {
    flag.value = false
  }
})

</script>

<style lang="scss" scoped>
body,
html {
  height: 100%;
}

.register {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform: translateX(100%);
  transition: all 1s;
  z-index: 30;

  /* 过渡效果，通过动画改变透明度 */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  animation: fadeIn 1s ease;

  /* 持续3秒，ease为默认的动画速度曲线 */
  .top {
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .cha {
      color: #eaeaea;
      font-size: 20px;
      padding-left: 25px;
    }
  }

  .dl {
    width: 273px;
    margin: auto;
    display: flex;
    flex-direction: column;
    padding-top: 20%;
    position: relative;

    p {
      font-size: 22px;
      margin-bottom: 20px;
    }

    .jiaoyan {
      width: 100%;
      height: 20px;
      bottom: 0;
      left: 0;
      margin-bottom: 10px;
      position: absolute;
    }

    form {
      height: 68px;
      display: flex;
      flex-direction: column;
      position: relative;

      .aaa {
        display: flex;
        width: 283px;

        input {
          width: 180px;
          padding-left: 10px;
        }
      }
    }

    .huoYzm,
    .huoYzm1 {
      width: 120px;
      color: #7e8c8d;
      background: rgba(238, 238, 238, 0.36);
      outline: none;
      border: 0;
      font-size: 12px;
      line-height: 44px;
      text-align: center;
    }

    .huoYzm1 {
      color: #b5b5b5;
    }

    input {
      height: 44px;
      width: 273px;
      color: #000;
      background: rgba(238, 238, 238, 0.36);
      padding-left: 10px;
      border-radius: 4px;
      border: none;
      caret-color: #face15;
      outline: none;
      font-size: 16px;

      &::placeholder {
        color: #b5b5b5;
      }
    }

    span {
      font-size: 12px;
      color: #617374;
    }

    .dlbtn {
      background: #fc3058;
      height: 44px;
      width: 283px;
      border-radius: 3px;
      color: #fff;
      border: none;
      font-size: 16px;
    }
  }
}
</style>